<template>
    <div class="bill">
        <e-scroll class="wrapper">
            <div class="wrapper-box">
                <span class="fixed-tip" name="top">让钱归钱，生活归生活</span>
                <div class="content-box">
                    <div class="year-box" v-for="(mData,year) in moneyData" :key="year">
                        <div class="money-box" v-for="(month,mi) in timeSort(Object.keys(mData))" :key="mi">
                            <div class="date-box">
                                <div class="t-b">
                                    <span>{{month}}月支出</span>
                                    <span>{{Object.values(mData[month]).map(v => {
	let m = (v.map(m => m.money).reduce((p,c) => +p + +c))
	return m
}).reduce((p,c) => +p + +c)}}</span>
                                </div>
                                <div class="t-b r">
                                    <span>收入</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="day-box" v-for="(day,di) in timeSort(Object.keys(mData[month]))" :key="di">
                                <div class="time-line">{{year}}-{{month}}-{{day}}</div>
                                <div class="note-box" v-for="(item,i) in mData[month][day]" :key="i">
                                    <div class="type-icon"><i class="iconfont" :class="item.icon"></i></div>
                                    <div class="info-box">
                                        <span class="money">{{item.money}}</span>
                                        <span class="desc o-text">{{item.tip ? item.tip : getDefaultTip(item.icon)}}</span>
                                    </div>
                                    <span class="time">{{item.time}}</span>
                                    <span class="pay">{{item.pay}}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <span class="fixed-tip" name="bottom">钱我不想管，但不能不管</span>
            </div>
        </e-scroll>
        <div class="add-note" @click="dialogVisible = true">
            <i class="iconfont icon-add"></i>
        </div>
        <e-dialog v-model="dialogVisible">
            <div class="pop-content" slot="content">
                <div class="user-input">
                    <div class="input" @click="showPicker">{{selectedText}}</div>
                    <e-select v-model="select.label" :options="select.options" @change="select.change"></e-select>
                </div>
                <div class="easy-swiper">
                    <div class="swiper-content" v-touch:index="touchCall">
                        <div class="swiper-box">
                            <div class="type-box">
                                <div class="type-info" v-for="(item,i) in typeData" :key="i" @click="selectType(item)">
                                    <div class="type-i" :class="{now: item.icon === nowType}">
                                        <i class="iconfont" :class="item.icon"></i>
                                    </div>
                                    <span>{{item.text}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-box">2</div>
                        <div class="swiper-box">3</div>
                        <div class="swiper-box">4</div>
                    </div>
                    <div class="swiper-footer">
                        <span v-for="i in swiper.length" :key="i" :class="{now: i - 1 === swiper.index}"></span>
                    </div>
                </div>
                <div class="money-top-box">
                    <input class="money-tip" type="text" placeholder="添加备注" v-model.trim="moneyTip">
                    <div class="money-input">
                        {{String(money).slice(0,12)}}
                        <i @click="money = 0" class="iconfont icon-guanbi2fill"></i>
                    </div>
                </div>
                <e-key-pad max-length="10" v-model="money" @next="testA"></e-key-pad>
            </div>
            <span slot="footer"></span>
        </e-dialog>
        <!--<e-dialog v-model="moneyKeyVisible" style="background: transparent;">-->
        <!--<e-key-pad v-model="money" slot="content"></e-key-pad>-->
        <!--<span slot="footer"></span>-->
        <!--</e-dialog>-->
        <picker @select="handleSelect(1,arguments)" :data="getYMD2" :selected-index="selectIndex"
                ref="pickerDate" @change="handleChange" title="请选择日期" cancelTxt="取消"
                confirmTxt="确定"></picker>
    </div>
</template>
<script>
  import ESelect from '../components/e-select'
  import EKeyPad from '../components/e-keypad'
  import EDialog from '../components/e-dialog'
  import BScroll from 'better-scroll'
  import EScroll from '../components/e-scroll'
  import Picker from '../components/e-picker'

  function createYear (y, step) {
    let arr = [y]
    for (let i = 1; i <= step; i++) {
      arr.unshift(y - i)
      arr.push(y + i)
    }
    return arr
  }

  function getAllDate (y, m) {
    // console.log('--y,m--', y, m)
    let date = new Date(`${y}/${m}/01`)
    date.setMonth(date.getMonth() + 1)
    date.setDate(0)
    let all = date.getDate()
    let arr = []
    for (let i = 1; i <= all; i++) {
      arr.push(i)
    }
    return arr
  }

  function getYear (type = true) {
    let date = new Date()
    if (type) {
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
    } else {
      return [date.getFullYear(), date.getMonth() + 1, date.getDate()]
    }
  }

  let tempData = JSON.parse(localStorage.getItem('moneyJSON')) || {}
  export default {
    name: 'bill',
    components: {
      ESelect, EKeyPad, EDialog, EScroll, Picker
    },
    data: function () {
      return {
        moneyData: tempData,
        nowType: 'icon-liwu',
        typeData: [
          {icon: 'icon-liwu', text: '礼物'},
          {icon: 'icon-lingshi', text: '零食'},
          {icon: 'icon-yule', text: '娱乐'},
          {icon: 'icon-jiaotong', text: '交通'},
          {icon: 'icon-gouwu', text: '购物'},
          {icon: 'icon-fushi', text: '服饰'},
          {icon: 'icon-jujia', text: '居家'},
          {icon: 'icon-yundong', text: '运动'},
          {icon: 'icon-shuma', text: '数码'},
          {icon: 'icon-lvxing', text: '旅行'},
          {icon: 'icon-yiliao', text: '医疗'},
          {icon: 'icon-weixiu', text: '维修'}
        ],
        swiper: {
          index: 1,
          length: 4
        },
        moneyKeyVisible: true,
        dialogVisible: false,
        test: {
          row: 3,
          column: 4,
          data: [
            {label: 9},
            {label: 8},
            {label: 7},
            {label: 6},
            {label: 5},
            {label: 4},
            {label: 3},
            {label: 2},
            {label: 1},
            {label: '.', type: 'once'},
            {label: '0'},
            {label: null, type: 'del'},
          ]
        },
        moneyTip: '',
        money: 0,
        select: {
          options: [
            {
              value: '选项1',
              label: '现金'
            }, {
              value: '选项2',
              label: '信用卡'
            }, {
              value: '选项3',
              label: '新增'
            }],
          label: '信用卡',
          change: function (item, i) {
            console.log('--item,i--', item, i)
          }
        },
        selectIndex: [10, new Date().getMonth(), new Date().getDate() - 1],
        selectedText: getYear(),
        dateIndex: [10, new Date().getMonth()],
        addSelectArr: getYear(false)
      }
    },
    directives: {
      touch: {
        // 指令的定义
        inserted: function (el, binding) {
          let type = null
          let x
          let index = 0
          el.addEventListener('touchstart', (e) => {
            el.style.transition = 'none'
            x = e.touches[0].clientX
          }, {passive: true})
          el.addEventListener('touchend', (e) => {
            let cx = x - e.changedTouches[0].clientX
            console.log('--cx--', cx)
            if (cx === 0) {
              return false
            }
            if (cx < 0) {
              type = 'right'
              index--
            } else {
              type = 'left'
              index++
            }
            if (index < 0) {
              index = 0
            }
            if (index > 3) {
              index = 3
            }
            el.style.transition = 'all 300ms'
            el.style.transform = `translate3d(${el.clientWidth * -index}px,0,0)`
            binding.value(index)
          }, {passive: true})
          el.addEventListener('touchmove', (e) => {
            e.preventDefault()
            el.style.transition = 'none'
            let cx = x - e.touches[0].clientX
            type = 'left'
            if (cx < 0) {
              type = 'right'
            }
            el.style.transform = `translate3d(${el.clientWidth * -index - cx}px,0,0)`
          }, {passive: false})
        }
      }
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted () {
      // this.$nextTick(() => {
      //   this.scroll = new BScroll(this.$refs.wrapper, {
      //     click: true
      //   })
      // })
    }, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    watch: {
      getYMD2 () {
        this.$refs.pickerDate.refresh()
      }
    },
    computed: {
      getYMD2 () {
        let str = this.dateIndex
        // console.log('--str--', str)
        const step = 10
        let y = this.dateIndex[0] + new Date().getFullYear() - step
        let m = this.dateIndex[1]
        let arr = []
        let data1 = createYear(new Date().getFullYear(), step).map(v => ({text: v, value: v}))
        arr.push(data1)
        let data2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(v => ({text: v, value: v}))
        arr.push(data2)
        let data3 = getAllDate(y, m + 1).map(v => ({text: v, value: v}))
        arr.push(data3)
        // console.log('--arr--', arr)
        return arr
        // return `${y}-${m}-${d}`
      }
    },
    methods: {
      getDefaultTip (icon) {
        return this.typeData.filter(v => v.icon === icon)[0].text
      },
      timeSort (keysArr) {
        return keysArr.sort((a, b) => b - a)
      },
      testA () {
        console.log('--test--', this.money)
        let item = {
          money: this.money,
          tip: this.moneyTip,
          time: this.selectedText,
          pay: this.select.label,
          icon: this.nowType
        }
        let y = this.addSelectArr[0]
        let m = this.addSelectArr[1]
        let d = this.addSelectArr[2]
        if (this.moneyData[y]) {
          console.log('--y--', y)
          if (this.moneyData[y][m]) {
            console.log('--y,m--', y, m)
            if (this.moneyData[y][m][d]) {
              console.log('--y,m,d--', y, m, d)
              this.moneyData[y][m][d].unshift(item)
            } else {
              this.$set(this.moneyData[y][m], d, [item])
            }
          } else {
            this.$set(this.moneyData[y], m, {
              [d]: [item]
            })
          }
        } else {
          this.$set(this.moneyData, y, {
            [m]: {
              [d]: [item]
            }
          })
        }
        /* save */
        localStorage.setItem('moneyJSON', JSON.stringify(this.moneyData))
        this.dialogVisible = false
      },
      touchCall (index) {
        console.log('--type,cx,index--', index)
        this.swiper.index = index
      },
      selectType (item) {
        this.nowType = item.icon
      },
      showPicker () {
        let picker = this.$refs.pickerDate
        picker.setData(this.getYMD2)
        picker.show()
      },
      handleSelect (index, args) {
        // console.log('--index,args--', index, args)
        this.addSelectArr = args[2]
        let str = args[2][0] + '年' + args[2][1] + '月' + args[2][2] + '日'
        this.selectedText = str
      },
      handleChange (i, newIndex) {
        // console.log('--i,newIndex--', i, newIndex)
        if (i === 0 || i === 1) {
          this.dateIndex.splice(i, 1, newIndex)
        }
        // console.log('--this.dateIndex--', this.dateIndex)
      }
    } // 函数
  }
</script>
<style lang='scss'>
    .money-top-box {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }

    .money-tip {
        height: 36px;
        line-height: 36px;
        background-color: inherit;
        border: unset;
        outline: unset;
        padding: unset;
        padding-left: 1em;
        font-size: 14px;
        color: #666666;
    }

    .money-input {
        position: relative;
        width: 100%;
        height: 36px;
        line-height: 36px;
        text-align: right;
        box-sizing: border-box;
        font-weight: bold;
        font-size: 16px;
        i {
            font-weight: normal;
            height: 36px;
            line-height: 36px;
            color: #cdcdcd;
            padding: 10px 1em;
        }
    }

    .type-box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .type-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: #666666;
            width: 20%;
            margin-top: 10px;
            flex-shrink: 0;
            > .type-i {
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                border-radius: 50%;
                > i {
                    font-size: 28px;
                }
                &.now {
                    background-color: #ff630a;
                    color: white;
                }
            }
        }
    }

    .easy-swiper {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        position: relative;
        .swiper-footer {
            display: flex;
            flex-direction: row;
            align-items: center;
            z-index: 3;
            pointer-events: none;
            height: 16px;
            margin-top: -16px;
            > span {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #ccc;
                transition: all 200ms;
                opacity: 0.2;
                margin: 0 4px;
                &.now {
                    background-color: #007aff;
                    opacity: 1;
                }
            }
        }
        .swiper-content {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            box-sizing: content-box;
            padding-bottom: 16px;
            > .swiper-box {
                width: 100%;
                flex-shrink: 0;
                text-align: center;
                font-size: 20px;
            }
        }
    }

    .pop-content {

    }

    .user-input {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 1em 0 0 1em;
        .e-select {
            width: 6em;
            margin-left: 1em;
        }
        > .input {
            width: 12em;
            height: 40px;
            border: 1px solid #409eff;
            outline: unset;
            border-radius: 4px;
            box-sizing: border-box;
            padding: 0 1em;
            color: #606266;
            font-size: 14px;
            line-height: 40px;
            text-align: left;
        }
    }

    .add-pop {
        position: fixed;
        z-index: 9;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        .select {
            margin: 20px;
            width: 240px;
            height: 40px;
            border: 1px solid #409eff;
            border-radius: 4px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 1em;
            position: relative;
            > input {
                width: 100%;
                height: 100%;
                border: unset;
                outline: unset;
                padding: unset;
                border-radius: 4px;
            }
        }
        .shadow-box {
            padding: 4px 0;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
            border: 1px solid #ebeef5;
            background-color: white;
        }
        .arrow {
            position: relative;
            transition: all 0.4s;
            &::before, &::after {
                content: "";
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border: 6px solid transparent;
                left: calc(50% - 6px);
                top: -6px;
            }
            &::before {
                filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
                border-top-width: 0;
                border-bottom-color: #ebeef5;
            }
            &::after {
                top: -4px;
                border-top-width: 0;
                border-bottom-color: #fff;
            }
            &.x {
                transform: rotate(180deg);
            }
        }
        .select-data {
            @extend .shadow-box;
            @extend .arrow;
            &::before, &::after {
                left: 2em;
            }
            margin: 12px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: absolute;
            top: 100%;
            left: 0;
            margin-left: 0;
            > div {
                height: 30px;
                line-height: 30px;
                width: 100%;
                box-sizing: border-box;
                text-align: left;
                padding-left: 1em;
                color: #606266;
                font-size: 14px;
                &.now {
                    background-color: #f5f7fa;
                    color: #409eff;
                    font-weight: 700;
                }
                &:hover {
                    background-color: #f5f7fa;
                    color: #409eff;
                    font-weight: 700;
                }
            }
        }
    }

    @mixin flex-box($align: center, $justify: space-between,$direction: row) {
        display: flex;
        flex-direction: $direction;
        align-items: $align;
        justify-content: $justify;
    }

    .o-text {
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        text-overflow: ellipsis;
        text-align: left;
    }

    .bill {
        width: 100%;
        height: 100%;
        .wrapper {
            height: 100%;
        }
        .date-box {
            @include flex-box();
            background-color: #4082a2;
            position: sticky;
            top: 0;
            z-index: 2;
            color: white;
            font-weight: bold;
            height: 90px;
            box-sizing: border-box;
            padding: 0 16px;
            span {
                &:nth-child(1) {
                    font-size: 14px;
                }
                &:nth-child(2) {
                    font-size: 34px;
                }
            }
            .r span {
                font-size: 16px;
            }
        }
        span {
            &.money {
                font-size: 20px;
                font-weight: bold;
            }
            &.desc {
                font-size: 14px;
                color: rgba(0, 0, 0, 0.55);
            }
            &.time {
                font-size: 12px;
                color: rgba(0, 0, 0, 0.55);
                position: absolute;
                top: 4px;
                right: 8px;
            }
            &.pay {
                font-size: 12px;
                color: rgba(0, 0, 0, 0.55);
                position: absolute;
                right: 8px;
                bottom: 4px;
            }
        }
        .t-b {
            @include flex-box(flex-start, $direction: column);
            &.r {
                align-items: flex-end;
                height: 52px;
            }
        }
        .add-note {
            position: fixed;
            bottom: 66px;
            margin-left: -25px;
            left: 50%;
            line-height: 50px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            outline: none;
            background-color: #fa9850;
            z-index: 3;
            i {
                font-size: 22px;
                font-weight: bold;
                color: white;
            }
        }
        .container {
            box-sizing: border-box;
            padding: 16px 0;
        }
        .time-line {
            height: 26px;
            line-height: 26px;
            color: #CCC7C7;
            font-size: 13px;
            margin: 4px 8px;
            position: relative;
            &::before, &::after {
                content: "";
                width: 30%;
                height: 1px;
                background-color: #CCC7C7;
                position: absolute;
                left: 0;
                top: 12px;
            }
            &::after {
                left: unset;
                right: 0;
            }
        }
        .note-box {
            height: 64px;
            @include flex-box($justify: flex-start);
            box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.24);
            padding: 8px;
            margin: 4px 8px;
            box-sizing: border-box;
            border-radius: 4px;
            position: relative;
            .type-icon {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: #DDDDDD;
                line-height: 40px;
                flex-shrink: 0;
                i {
                    font-size: 24px;
                }
            }
            .info-box {
                @include flex-box(flex-start, $direction: column);
                flex: 1;
                margin-left: 8px;
                max-width: calc(100% - 8em);
                box-sizing: border-box;
            }
            & + .note-box {
                margin-top: 16px;
            }
        }
    }
</style>
